<template>
  <div style="padding: 8px 20px 20px 20px">
    <el-row :gutter="20">
      <el-col :span="4">
        <div style="font-size: 20px;font-weight: bold;margin: 8px 0 20px 0;"> 客户总量分析</div>
      </el-col>
    </el-row>
    <crm-bar
      :x-data="xData"
      :y-data="yData"
    >
      <template slot="bar-table">
        <el-table :data="tableData" style="width: 100%" max-height="400px">
          <el-table-column align="center" show-overflow-tooltip prop="employeeName" label="员工姓名" min-width="155"/>
          <el-table-column align="center" show-overflow-tooltip prop="customerNum" label="新增客户数" min-width="115"/>
          <el-table-column align="center" show-overflow-tooltip prop="customerDealNum" label="成交客户数"
                           min-width="115"
          />
          <el-table-column align="center" show-overflow-tooltip prop="transactionTate" label="客户成交率"
                           min-width="115"
          />
          <el-table-column align="center" show-overflow-tooltip prop="contractMoney" label="合同总金额"
                           min-width="135"
          />
          <el-table-column align="center" show-overflow-tooltip prop="receivableMoney" label="回款金额"
                           min-width="135"
          />
        </el-table>
      </template>
    </crm-bar>
  </div>
</template>

<script>
import CrmBar from '@/components/Echarts/Bar/Index'

export default {
  name: 'CustomerTotal',
  components: { CrmBar },
  props: {},
  data() {
    return {
      xData: ['202301', '202302', '202303', '202304', '202305', '202306', '202307', '202308', '202309', '202310', '202311', '202312'],
      yData: [
        { name: '成交客户数', data: [] },
        { name: '新增客户数', data: [] }
      ],
      tableData: [
        {
          employeeName: '王小虎',
          customerNum: '3',
          customerDealNum: '0',
          transactionTate: '0',
          contractMoney: '170000',
          receivableMoney: '13000'
        }, {
          employeeName: '王小虎',
          customerNum: '3',
          customerDealNum: '0',
          transactionTate: '0',
          contractMoney: '170000',
          receivableMoney: '13000'
        }, {
          employeeName: '王小虎',
          customerNum: '3',
          customerDealNum: '0',
          transactionTate: '0',
          contractMoney: '170000',
          receivableMoney: '13000'
        }, {
          employeeName: '王小虎',
          customerNum: '3',
          customerDealNum: '0',
          transactionTate: '0',
          contractMoney: '170000',
          receivableMoney: '13000'
        }, {
          employeeName: '王小虎',
          customerNum: '3',
          customerDealNum: '0',
          transactionTate: '0',
          contractMoney: '170000',
          receivableMoney: '13000'
        }, {
          employeeName: '王小虎',
          customerNum: '3',
          customerDealNum: '0',
          transactionTate: '0',
          contractMoney: '170000',
          receivableMoney: '13000'
        }
      ]
    }
  },
  // 在实例创建完成后被立即调用
  created() {
    this.initData()
  },
  // 实例被挂在后调用
  mounted() {

  },
  // 方法
  methods: {
    initData() {
      for (let i = 0; i < 2; i++) {
        for (let j = 0; j < 12; j++) {
          this.yData[i].data[j] = Math.round(Math.random() * 100)
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
